import React, { useState } from 'react';
import { Radio, Card, Box ,Table, List, Avatar, Balloon, Icon, Button } from '@alifd/next';
import { Guide } from 'bizcharts';

import styles from './index.module.scss';
// import { withRouter, withSearchParams } from 'ice';

const { Html } = Guide;

const dataSource = [
  {
    id:100,
    time:'投稿数量'
  },
  {
    id:17,
    time:'总采纳数量'
  },
  {
    id:17+'%',
    time:'总采纳比例'
  },
  {
    id:79,
    time:'投稿人数'
  }
];

interface ChartItem {
  type?: string;
  value?: number;
  hint?:string;
  title?: string;
}

interface CardConfig {
  title?: string;
  value?: number;
  hint?:string;
  hints?:string;
  chartData?: ChartItem[];
  chartHeight?: number;
}

const DEFAULT_DATA: CardConfig = {
  title: '期刊稿源概览',
  hint:'欢迎查看期刊稿源',                 //提示信息
  hints:'欢迎查看TOP榜单',
  value: 183112,
  chartData: [
    {
      type: '类别一事例一',
      value: 40,
      title: '类别一事例一 | 40.00%     4,544',
    },
    {
      type: '类别一事例二',
      value: 21,
      title: '类别一事例二 | 22.12%     2,344',
    },
    {
      type: '类别一事例三',
      value: 17,
      title: '类别一事例三 | 16.59%     3,512',
    },
    {
      type: '类别一事例四',
      value: 13,
      title: '类别一事例四 | 13.11%     2,341',
    },
    {
      type: '类别一事例五',
      value: 9,
      title: '类别一事例五 |  9.29%     1,231',
    },
  ],
  chartHeight: 500,
};

export interface FusionCardLineChartProps {
  cardConfig?: CardConfig;
}

const FusionCardLineChart: React.FunctionComponent<FusionCardLineChartProps> = (props: FusionCardLineChartProps): JSX.Element => {
  const {
    cardConfig = DEFAULT_DATA,
  } = props;

  const { title,hint,hints} = cardConfig;

  const [type, setType] = useState('one');
  const changeType = (key: string) => setType(key);

  //定义一波样式
  const styleColors={background:'#F05D36',height:'100%',color:'withe',fontWeight:'border',textAligin:'center',}

   //提示信息
   const content = (<div><p>{hint}</p></div>);
   const contents = (<div><p>{hints}</p></div>);
   const MoveTarget = <Button size="small" type="primary" style={{margin: '5px'}}><Icon type="atm" /></Button>;
   const MoveTargets = <Button size="small" type="primary" style={{margin: '5px'}}><Icon type="atm" /></Button>;
  return (
    <Card free style={{height:'100%'}}>
      <Card.Header title={<span>
        {title}
        <Balloon trigger={MoveTarget} triggerType="hover">
            {content}
        </Balloon>
      </span>} />
      <Card.Divider />
      <Card.Content>
        <Box align="center">
          <Radio.Group
            shape="button"
            value={type}
            onChange={changeType}
            className={styles.radioGroup}
          >
          </Radio.Group>
        </Box>
        <Table style={{height:'100%'}} className="charTitle" dataSource={dataSource} isZebra={true}>
            <Table.Column title="名称" style={styleColors} dataIndex="time"/>
            <Table.Column title="数量" style={styleColors} dataIndex="id"/>
        </Table>
      </Card.Content>
      <Card.Header title={<span>
        TOP榜单
        <Balloon trigger={MoveTargets} triggerType="hover">
            {contents}
        </Balloon>
      </span>} style={{marginTop:0}}/>
              <Card.Divider />
              <Card.Content style={{marginTop:0}}>
                <List style={{height: 250}}>
                  <List.Item
                    title="Fusion Design"
                    media={
                      <Avatar src="https://img.alicdn.com/tfs/TB1SFZAvQL0gK0jSZFAXXcA9pXa-200-200.png" />
                    }
                    style={{padding:5}}
                  />
                  <List.Item
                    title="Alibaba ICS"
                    media={
                      <Avatar src="https://img.alicdn.com/tfs/TB1QwMzvHr1gK0jSZR0XXbP8XXa-200-200.png" />
                    }
                    style={{padding:5}}
                  />
                  <List.Item
                    title="Retcode 前端监控"
                    media={
                      <Avatar src="https://img.alicdn.com/tfs/TB1qxgDvG61gK0jSZFlXXXDKFXa-200-200.png" />
                    }
                    style={{padding:5}}
                  />
                  <List.Item
                    title="新零售事业部"
                    media={
                      <Avatar src="https://img.alicdn.com/tfs/TB1TfwDvQT2gK0jSZFkXXcIQFXa-200-200.png" />
                    }
                    style={{padding:5}}
                  />
                  <List.Item
                    title="前端物料中心"
                    media={
                      <Avatar src="https://img.alicdn.com/tfs/TB1GgMzvHr1gK0jSZR0XXbP8XXa-200-200.png" />
                    }
                    style={{padding:5}}
                  />
                </List>
              </Card.Content>
    </Card>
  );
};

export default FusionCardLineChart;
